<template>
  <section id="print">
    <!-- 预还款详情 -->
    <dialog-info :visible-p.sync="dialogRepayInfoVisible" :details-p="details"></dialog-info>
    <el-dialog
      :custom-class="'dia-class '+detailsP.masterChainId"
      :visible.sync="visibleP"
      :before-close="handleClose"
      center
    >
      <header slot="title" class="headerTitle">
        <span class="title">{{getTitle}}</span>
      </header>
      <section class="section">
        <ul>
          <li>
            <span>申请方:
              <em>{{this.detailsP.applySupplierName | nullDealWith}}</em>
            </span>
          </li>
          <li>
            <span>保理商:
              <em>{{this.detailsP.factoringCustName | nullDealWith}}</em>
            </span>
          </li>
        </ul>
        <ul>
          <li>
            <span>申请金额:
              <em>{{this.detailsP.applyAmt | regexNum}}</em>
            </span>
          </li>
          <li>
            <span>实放金额:
              <em>{{this.detailsP.loanAmt | regexNum}}</em>
            </span>
          </li>
        </ul>
        <ul>
          <li>
            <span>还款日期:
              <em>{{this.detailsP.repayDate | dateFormat}}</em>
            </span>
          </li>
          <li>
            <span>币别:
              <em>{{this.detailsP.currencyName}}</em>
            </span>
          </li>
        </ul>
      </section>
      <section class="section">
        <ul>
          <li>
            <span>年利率:
              <em>{{this.detailsP.interestRate | addPercent}}</em>
            </span>
          </li>
          <li>
            <span>提前还款手续费率:
              <em>{{this.detailsP.serviceFeeRate | addPercent}}</em>
            </span>
          </li>
        </ul>
        <ul>
          <li>
            <span>罚息利率:
              <em>{{this.detailsP.overdueRate | addPercent}}</em>
            </span>
          </li>
          <li>
            <span>提前还款手续费:
              <em>{{this.detailsP.prepaymentDeductInterest | addPercent}}</em>
            </span>
          </li>
        </ul>
        <ul>
          <li>
            <span>宽容天数:
              <em>{{this.detailsP.fineGraceDays}}天</em>
            </span>
          </li>
          <li>
            <span>还款方式:
              <em>{{this.detailsP.repaymentType}}</em>
            </span>
          </li>
        </ul>
      </section>
      <section class="section">
        <ul class="height-auto">
          <span style="color:#9d9d9d">订单质押清单:</span>
          <table class="tableList" border="1" bordercolor="#E4E4E4" style="border:1px solid #E4E4E4;margin-top:10px;text-align:center;">
            <thead>
              <tr>
                <th>法人代码</th>
                <th>法人单位</th>
                <th>订单号</th>
                <th style="width:120px;">质押订单金额</th>
              </tr>
            </thead>
            <tbody>
                <template v-for = "item in this.detailsP.poLoanInfoList">
                    <template v-if="item.poLoanDetailInfoList.length>0">
                      <tr v-for = "(list,index) in item.poLoanDetailInfoList" :key="list.poNumber">
                        <td class="td-center" :class="{'isHidden':index>0}" :rowspan="item.poLoanDetailInfoList.length">{{item.corpCode}}</td>
                        <td class="td-center" :class="{'isHidden':index>0}" :rowspan="item.poLoanDetailInfoList.length">{{item.corpName}}</td>
                        <td class="td-center">{{list.poNumber}}</td>
                        <td class="td-right">{{list.pledgeOrderAmt|thousandth}}</td>
                      </tr>
                    </template>
                    <template v-else>
                      <tr :key="item.corpCode">
                        <td class="td-center" :class="{'isHidden':idx>0 || index>0}" :rowspan="item.poLoanDetailInfoList.length">{{item.corpCode}}</td>
                        <td class="td-center" :class="{'isHidden':idx>0 || index>0}" :rowspan="item.poLoanDetailInfoList.length">{{item.corpName}}</td>
                        <td class="td-center">--</td>
                        <td class="td-right">--</td>
                      </tr>
                    </template>
                </template>
            </tbody>
          </table>
        </ul>
        <ul class="height-auto" style="display:flex;">
          <span style="width:80px;">合同:</span>
          <div
            class="a-link-group inline-block"
            style="background:#ECECEC;flex:1;height:80px;max-height:80px;overflow-y:auto;"
          >
            <a
              v-for="item in detailsP.contractList"
              :key="item.contractId"
              :href="item.contractUrl"
              target="_blank"
              @click="constractHandle(item.contractUrl)"
            >{{item.contractName}}</a>
            <!-- <a v-for="item in detailsP.contractList" :key="item.contractId" href="http://" @click.prevent="constractHandle(item.contractId)">{{item.contractName}}</a> -->
          </div>
        </ul>
        <ul style="display:flex;">
          <span style="width:80px;"></span>
          <div
            class="a-link-group inline-block"
            style="flex:1;"
          >
            <el-button type="primary" class="searchBtn" size="small" @click="handleClose">确认</el-button>
            <el-button v-if="showRepayBtn" @click="handleShowRepay" type="primary" size="small" plain>预还款计划</el-button>
          </div>
        </ul>
      </section>
      <!-- <footer class="no-print" slot="footer" :style="'clear:both'">
        <el-button type="primary" class="searchBtn" size="small" @click="handleClose">确认</el-button>
        <el-button v-if="showRepayBtn" @click="handleShowRepay" type="primary" size="small" plain>预还款计划</el-button>
      </footer> -->
    </el-dialog>
  </section>
</template>
<style scoped lang="scss">
@import "@/assets/css/_dialog.scss";
@import "@/assets/css/_newUI.scss";
section {
  > ul,
  > ul:last-of-type {
    border: none;
  }
  > ul > li:not(:first-of-type) {
    border-left: none;
  }
  li {
    width: 68%;
  }
  li + li {
    width: 30%;
  }
}
span > lable.strong {
  color: #303133;
}
span.po-number-style:not(:last-child)::after {
  content: ",";
}
.tableList{
  width: 100%;
  border-collapse: collapse;
  thead tr{
    height: 30px;
    th{
      font-weight: normal;
      background:#3F97F8;
      color:#fff;
    }
  }
  tbody tr{
    height: 30px;
    text-align: center;
    &:last-child{
      border-bottom: none;
      td{
        border-bottom: none;
        span{
          margin-right: 10px;
        }
      }
    }
  }
}
ul:last-child{
  height: auto;
  border-top: none;
  span{
    padding-left: 0;
    line-height: 45px;
  }
}
td.td-center {
  text-align: center;
}
td.td-right {
  text-align: right;
}
.isHidden{
  display:none;
}
</style>

<script>
import DialogClose from '@/mixins/suplier/Ar/DialogClose'
// 导入时间格式化过滤器
import Common from '@/mixins/common/common'
/* 待收Ar详情 */
export default {
  props: {
    visibleP: Boolean,
    detailsP: Object,
    showRepayBtn: {
      type: Boolean,
      default: false
    }
  },
  mixins: [DialogClose, Common],
  data () {
    return {
      details: {},
      dialogRepayInfoVisible: false
    }
  },
  computed: {
    getTitle () {
      return '融资编号' + this.detailsP.loanId
    }
  },
  components: {
    'dialog-info': () =>
      import(/* webpackChunkName: 'Dialog' */ '@/components/suplier/Ar/my/DialogRepayInfo')
  },
  methods: {
    handleShowRepay: handleShowRepay
  }
}
function handleShowRepay () {
  this.getLoanDetail('/loan/loanTrialRepaymentScheduleInfo.do', { loanId: this.detailsP.loanId }).then(res => {
    if (res) {
      this.details = res
      this.dialogRepayInfoVisible = true
    }
  })
}
</script>
